<!-- 请假记录 -->
<template>
    <div class="vote_main">
        <header>
            <div class="demo-date-picker">
                <div class="block">
                    <span class="demonstration">发布日期:</span>
                    <el-date-picker v-model="day" type="month" />
                </div>
            </div>
            <p>
                状态：
                <el-select v-model="select2" class="m-2" placeholder="请选择" style="height: 30px;">
                    <el-option label="提交审核" :value="1" />
                    <el-option label="通过申请" :value="3" />
                </el-select>
            </p>

            <p>
                年级/班级：
                <el-select v-model="select3" class="m-2" placeholder="请选择" style="height: 30px;">
                    <el-option label="三年级一班" :value="1" />
                    <el-option label="三年级二班" :value="2" />
                </el-select>
            </p>
            <p>
                <el-button type="primary" size="small" @click="selects(day, select2, select3)">查询</el-button>
                <el-button size="small">重置</el-button>
            </p>
        </header>
        <div class="vote_couent">
            <el-table :data="tableData" style="width: 100% ">
                <el-table-column prop="index" label="序号" width="60">
                    <template #default="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="student" label="请假学生" width="90">
                    <template #default="scope">
                        <span>
                            {{ scope.row.student.name }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="student" label="年级班级" width="120">
                    <template #default="scope">
                        <span>
                            {{ `${scope.row.student.classes.gradeId == 3 ? "三" :
                                "3"}年级${scope.row.student.classes.classId == 1 ?
                                    "一" : "二"}班` }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="请假类型" width="90"></el-table-column>
                <el-table-column prop="beginTime" label="请假时间" width="180"></el-table-column>
                <el-table-column prop="detail" label="请假事由"></el-table-column>
                <el-table-column prop="teacher" label="请假人">
                    <template #default="scope">
                        <span>
                            {{ scope.row.teacher.name }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="endTime" label="发起时间" width="180"></el-table-column>
                <el-table-column prop="state" label="请假状态">
                    <template #default="scope">
                        {{ scope.row.state == 1 ? "通过" : "待审核" }}
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="操作">
                    <template #default="scope">
                        <span style="color: lightgreen;" @click="open(scope.row.id)">查看</span>
                        <el-drawer v-model="drawer" title="查看审批申请" :append-to-body="drawer">
                            <div class="drawer">
                                <div class="drawerTop"
                                    style="display: flex; flex-direction: column; justify-content: space-around; height: 300px;">
                                    <p><span>{{ students.name }}</span>/<span>{{ students.sex == 1 ? "男" : "女"
                                    }}</span>/<span>{{ `${classes.gradeId == 3 ? "三" :
    "二"}年级(${classes.classId == 1 ? "一" : "二"})班
                                            `}}</span></p>
                                    <p style="color: #D7C4BD;"><span>{{ teachers.name }}：</span><span>{{ deails.beginTime
                                    }}</span></p>
                                    <p>请假类型：<span>{{ deails.type }}</span></p>
                                    <p>请假时间：<span style="color: #646464;">{{ deails.beginTime }}</span></p>
                                    <p>请假事由：<span style="color: #646464;">{{ deails.detail }}</span></p>
                                </div>
                                <div class="drawerFlow">
                                    <h4 style="margin-bottom: 50px; color: #646464;">审批流程</h4>
                                    <!-- 步骤条 -->
                                    <!-- active决定流程到第几个，finish-status决定状态 -->
                                    <el-steps :space="200" style="height: 200px;">
                                        <el-step style="color: #646464;" title="班主任杨老师" />
                                        <el-step title="家长张亮" />
                                    </el-steps>
                                </div>
                            </div>
                        </el-drawer>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    <!-- <div class="demo-pagination-block" style="float: right;">
            <el-pagination :total="10" v-model:page-size="pageSize4" :page-sizes="[5, 7, 9, 12]" :small="small"
                :disabled="disabled" :background="background" layout="prev, pager, next, total, jumper, sizes"
                next-text="下一页" prev-text="上一页" v-model:current-page="currentPage4" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
            </div> -->
    </div>
</template>

<script setup lang="ts" >
import server from '@/api';
import { ElNotification } from 'element-plus';
import { ref, onMounted } from 'vue';
const day = ref('')
const drawer = ref(false)
var select2 = ref()
var select3 = ref()
var tableData: any = ref([])
var deails: any = ref([])
const currentPage4 = ref(4)
const pageSize4 = ref(10)
const small: any = ref(false)
const background: any = ref(false)
const disabled: any = ref(false)
const students: any = ref([])
const teachers: any = ref([])
const classes: any = ref([])
const handleSizeChange = (val: number) => {
    // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    // console.log(`current page: ${val}`)
}
onMounted(async () => {
    var res = await server.students.getLeaveApplicationByPage()
    tableData.value = res.data.data.data
    // console.log(res.data.data.data);

})
const open = async (id: any) => {
    drawer.value = true
    var res = await server.students.getLeaveApplicationById(id)
    // console.log(res.data.data);
    if (res.data.code == 200) {
        deails.value = res.data.data[0]
        students.value = deails.value.student
        teachers.value = deails.value.teacher
        classes.value = students.value.classes
        // console.log(deails.value.student, students.value, teachers.value, classes.value);

        ElNotification.success({ message: '获取详情成功' })
    }
}
const selects = async (day: any, s2: any, s3: any) => {
    if (day && !s2 && !s3) {
        var month = day.getMonth() + 1
        var year = day.getFullYear()
        // console.log(month);
        day = `${year}-0${month}`
        // console.log(day);
        var res = await server.students.getLeaveApplicationByPage()
        tableData.value = res.data.data.data
        tableData.value = tableData.value.filter((item: any) => item.beginTime.includes(day))
    } else if (s2 && !day && !s3) {
        // console.log(s2);
        var res = await server.students.getLeaveApplicationByPage()
        tableData.value = res.data.data.data
        tableData.value = tableData.value.filter((item: any) => item.state == s2)
    } else {
        // console.log(s3);
        var res = await server.students.getLeaveApplicationByPage()
        tableData.value = res.data.data.data
        tableData.value = tableData.value.filter((item: any) => item.student.classes.classId == s3)
    }

}



</script>

<style scoped  lang="scss">
.vote_main {
    font-size: 12px;

    header {
        width: 98%;
        margin: auto;
        background-color: #fff;
        height: 100px;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        margin-bottom: 20px;
    }

    .vote_couent {
        width: 98%;
        background-color: #fff;
        margin: auto;
    }
}
</style>